@extends('layouts.layout')
@section('body_class', 'nav-md')
@section('body_content')
@section('body_content')
    <div class="container body">
        <div class="main_container">
            @include('includes.sidebar')
            <form id="form">
                <div class="right_col" role="main">
                    <div class="row">
                        <div class="col-xs-8">
                            <h2 class="title-dashboard">Transaction Sell Detail |
                                <small>#{{ $transaction->invoice_sell }}</small></h2>
                        </div>
                        <div class="col-xs-12">
                            <hr>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-xs-4">
                            <div class="x_panel">
                                <div class="x_content">
                                    <h3 style="font-size:1em;">Transaction</h3>
                                    <hr>

                                    <div class="form-horizontal">
                                        <div class="form-group">
                                            <label class="col-xs-5 col-md-4 col-lg-3 control-label">Invoice</label>
                                            <div class="col-xs-7 col-sm-8">
                                                <input type="text" class="form-control" disabled="disabled"
                                                    value="{{ $transaction->invoice_sell }}">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-xs-5 col-md-4 col-lg-3 control-label">Date</label>
                                            <div class="col-xs-7 col-sm-8">
                                                <input type="text" class="form-control" disabled="disabled"
                                                    value="{{ $transaction->transaction_date }}">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-xs-5 col-md-4 col-lg-3 control-label">Status</label>
                                            <div class="col-xs-7 col-sm-8">
                                                <input type="text" class="form-control" disabled="disabled"
                                                    value="{{ $transaction->payment_status }}">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-xs-5 col-md-4 col-lg-3 control-label">Payment Method</label>
                                            <div class="col-xs-7 col-sm-8">
                                                <input type="text" class="form-control" disabled="disabled"
                                                    value="{{ $transaction->payment_method }}">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-4">
                            <div class="x_panel">
                                <div class="x_content">
                                    <h3 style="font-size:1em;">File Upload</h3>
                                    <hr>
                                    <div class="form-horizontal">
                                        <div class="form-group">
                                            <div class="col-xs-6 col-sm-6 col-md-6 text-center">
                                                <label class="control-label">Invoice</label>
                                                @if ($transaction->payment)
                                                    @if ($transaction->payment->invoice_photo)
                                                        <div>
                                                            <a
                                                            href="{{ env('ALIYUN_OSS_IMAGE_URL_BUTIK') . '/sell/invoice/' . $transaction->payment->invoice_photo }}">
                                                            <img class="img1"
                                                            src="{{ env('ALIYUN_OSS_IMAGE_URL_BUTIK') . '/sell/invoice/' . $transaction->payment->invoice_photo }}"
                                                            height="50px">
                                                        </a>
                                                    </div>
                                                    @endif
                                                @endif
                                            </div>
                                            <div class="col-xs-6 col-sm-6 col-md-6 text-center">
                                                <label class="control-label">Bukti Pembayaran</label>
                                                @if ($transaction->payment)
                                                    @if ($transaction->payment->data_payment_obj)
                                                    <div>
                                                        @php
                                                            $payment_proof_pict = json_decode(
                                                                $transaction->payment->data_payment_obj,
                                                                true
                                                            )['transfer_proof_pict'];
                                                        @endphp
                                                                <a
                                                                    href="{{ env('ALIYUN_OSS_IMAGE_URL_BUTIK') . '/sell/bukti_transfer/' . $payment_proof_pict }}">
                                                                    <img class="img1"
                                                                    src="{{ env('ALIYUN_OSS_IMAGE_URL_BUTIK') . '/sell/bukti_transfer/' . $payment_proof_pict }}"
                                                                    height="100px">
                                                                </a>
                                                            </div>
                                                        @endif
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-4">
                            <div class="x_panel">
                                <div class="x_content">
                                    <h3 style="font-size:1em;">Customer</h3>
                                    <hr>
                                    <div class="form-horizontal">
                                        <div class="form-group">
                                            <label class="col-xs-5 col-md-4 col-lg-3 control-label">Name</label>
                                            <div class="col-xs-7 col-sm-8">
                                                <input type="text" id="name" name="customer_name" class="form-control" disabled
                                                    value="{{ $transaction->customer_name }}">
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-xs-5 col-md-4 col-lg-3 control-label">Email</label>
                                            <div class="col-xs-7 col-sm-8">
                                                <input type="email" id="email" name="customer_email" class="form-control" disabled
                                                    value="{{ $transaction->customer_email }}">
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-xs-5 col-md-4 col-lg-3 control-label">Handphone</label>
                                            <div class="col-xs-7 col-sm-8">
                                                <input type="tel" class="form-control" id='no_handphone' name="customer_phone" disabled
                                                    value="{{ $transaction->customer_phone }}">
                                            </div>
                                        </div>
                                        @if ($user == '1')
                                            <div class="form-group">
                                                <label class="col-xs-5 col-md-4 col-lg-3 control-label"></label>
                                                <div class="col-xs-7 col-sm-8">
                                                    <button type="button" id="btnEditPhone" class="btn btn-warning">
                                                        Edit
                                                    </button>                   
                                                    <button type="button" id="btnSavePhone" class="btn btn-success" style="display:none;" data-id="{{ $transaction->id }}">
                                                        Save
                                                    </button>
                                                </div>
                                            </div>
                                        @endif
                                        
                                        @if ($transaction->is_laku_cicil != null && $transaction->payment_status == 'sudah')
                                            <div class="form-group">
                                                <label class="col-xs-5 col-md-4 col-lg-3 control-label">Address</label>
                                                <div class="col-xs-7 col-sm-8">
                                                    @if ($transaction->cicil_inv)
                                                        @if ($transaction->cicil_inv->laku_cicil_details->customer_address->type == 'alamat')
                                                            <textarea class="form-control" rows="3" disabled>{{ $transaction->cicil_inv->laku_cicil_details->customer_address->alamat }}, {{ $transaction->cicil_inv->laku_cicil_details->customer_address->kode_pos }}, {{ $transaction->cicil_inv->laku_cicil_details->customer_address->kecamatan->name }}, {{ $transaction->cicil_inv->laku_cicil_details->customer_address->kota->name }}, {{ $transaction->cicil_inv->laku_cicil_details->customer_address->provinsi->name }}</textarea>
                                                        @else
                                                            <textarea class="form-control" rows="3" disabled>{{ $transaction->cicil_inv->laku_cicil_details->customer_address->store->kode_toko }} {{ $transaction->cicil_inv->laku_cicil_details->customer_address->store->nama }}</textarea>
                                                        @endif

                                                    @elseif($transaction->cicil_inv_number)
                                                        @if ($transaction->cicil_inv_number->laku_cicil_details->customer_address->type == 'alamat')
                                                            <textarea class="form-control" rows="3" disabled>{{ $transaction->cicil_inv_number->laku_cicil_details->customer_address->alamat }}, {{ $transaction->cicil_inv_number->laku_cicil_details->customer_address->kode_pos }}, {{ $transaction->cicil_inv_number->laku_cicil_details->customer_address->kecamatan->name }}, {{ $transaction->cicil_inv_number->laku_cicil_details->customer_address->kota->name }}, {{ $transaction->cicil_inv_number->laku_cicil_details->customer_address->provinsi->name }}</textarea>
                                                        @else
                                                            <textarea class="form-control" rows="3" disabled>{{ $transaction->cicil_inv_number->laku_cicil_details->customer_address->store->kode_toko }} {{ $transaction->cicil_inv_number->laku_cicil_details->customer_address->store->nama }}</textarea>
                                                        @endif

                                                    @elseif($transaction->cicil_code)
                                                        @if ($transaction->cicil_code->laku_cicil_details->customer_address->type == 'alamat')
                                                            <textarea class="form-control" rows="3" disabled>{{ $transaction->cicil_code->laku_cicil_details->customer_address->alamat }}, {{ $transaction->cicil_code->laku_cicil_details->customer_address->kode_pos }}, {{ $transaction->cicil_code->laku_cicil_details->customer_address->kecamatan->name }}, {{ $transaction->cicil_code->laku_cicil_details->customer_address->kota->name }}, {{ $transaction->cicil_code->laku_cicil_details->customer_address->provinsi->name }}</textarea>
                                                        @else
                                                            <textarea class="form-control" rows="3" disabled>{{ $transaction->cicil_code->laku_cicil_details->customer_address->store->kode_toko }} {{ $transaction->cicil_code->laku_cicil_details->customer_address->store->nama }}</textarea>
                                                        @endif
                                                    @endif
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12">
                            <div class="x_panel">
                                <div class="x_content">
                                    <div class="row">
                                        <div class="col-xs-8">
                                            <h3 style="font-size:1em;">Items</h3>
                                        </div>
                                    </div>
                                    <hr>
                                    <table class="table table-bordered table-striped">
                                        <thead>
                                            <tr>
                                                <th class="text-center">Brand</th>
                                                <th class="text-right">Pecahan</th>
                                                <th class="text-right">Total Harga</th>
                                                <th class="text-right">Sertifikat</th>
                                                <th class="text-right">Code Plu</th>
                                                <th class="text-center">Last Updated</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse($transaction->item as $transaction_detail)
                                                <tr>
                                                    <td class="text-center">
                                                        {{ $transaction_detail->item_brand }}
                                                        @if ($transaction_detail->plu)
                                                            <div style="font-weight: bold;">
                                                                ({{ $transaction_detail->item_certificate }})
                                                            </div>
                                                        @endif
                                                    </td>
                                                    <td class="text-right">{{ $transaction_detail->weight_goldbar }}</td>
                                                    <td class="text-right">{{ number_format($transaction_detail->price) }}
                                                        @if (in_array(auth()->user()->id_users_team, ['1', '3', '4']) && $transaction->is_laku_cicil == null)
                                                            <div class="row"
                                                                style="margin: 5px; margin-top: 20px; padding: 5px; border: 1px dashed #555;">
                                                                <form action="{{ url('butik/sell/price/edit') }}"
                                                                    method="POST">
                                                                    {{ csrf_field() }}
                                                                    <input type="hidden" name="trx_detail_id"
                                                                        value="{{ $transaction_detail->id }}">
                                                                    <div class="col-xs-12 col-md-7 text-left"
                                                                        style="margin: 4px;">
                                                                        <div>Price New</div>
                                                                        <input type="number" class="form-control"
                                                                            id="price_{{ $transaction_detail->id }}"
                                                                            name="price" required>
                                                                    </div>
                                                                    <div class="col-xs-12 col-md-12" style="margin: 4px;">
                                                                        <textarea type="text" class="form-control" id="reason_{{ $transaction_detail->id }}" name="reason"
                                                                            placeholder="Alasan edit Harga"></textarea>
                                                                    </div>
                                                                    <div class="col-md-12 text-left" style="margin: 4px;">
                                                                        <button class="btn btn-success edit-price-btn"
                                                                            data-id="{{ $transaction_detail->id }}"
                                                                            type="button">Edit Price</button>
                                                                    </div>
                                                                </form>
                                                            </div>
                                                        @endif
                                                    </td>
                                                    <td class="text-right">{{ $transaction_detail->item_certificates }}
                                                    <td class="text-right">{{ $transaction_detail->certificate ? $transaction_detail->certificate->plu_code : '-'}}
                                                    </td>
                                                    <td class="text-center">
                                                        {{-- @if (in_array(auth()->user()->username, ['200318', '230611']))
                                                        <a href="{{ route('update_report_detail',$transaction_detail->id) }}" class="btn btn-warning edit m-1" style="width: 90px">Edit</a>
                                                    @else ~ @endif --}}
                                                        {{ $transaction_detail->change_price_at }} <br>
                                                        {{ $transaction_detail->users_bo ? $transaction_detail->users_bo->name : '-' }}
                                                        <br>
                                                        {{ $transaction_detail->reason }} <br>
                                                        {{-- {{ number_format($transaction_detail->old_price) }} <br> --}}
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="7" class="text-center">No Data</td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                        <tfoot>
                                            <tr>
                                                <th class="text-right">TOTAL</th>
                                                <th class="text-right">
                                                    {{ number_format($transaction->item()->sum('weight_goldbar')) }} gram
                                                </th>
                                                <th class="text-right">{{ number_format($transaction->total) }}</th>
                                            </tr>
                                            <tr>
                                                <th class="text-right">PPH Pasal 22</th>
                                                <th></th>
                                                <th class="text-right">{{ number_format($transaction->pph_amount) }}</th>
                                            </tr>
                                            <tr>
                                                <th class="text-right">TOTAL AFTER TAX</th>
                                                <th></th>
                                                <th class="text-right">{{ number_format($transaction->grand_total) }}</th>
                                            </tr>
                                        </tfoot>
                                    </table>
                                    <div class="col-xs-4 text-right">
                                        <a href="{{ route('report_detail_pdf', $transaction->id) }}"
                                            class="btn btn-primary" target="_blank">Print PDF</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script>
         $(document).ready(function() {

            $('#btnEditPhone').click(function() {

                // enable input handphone
                $('input[value="{{ $transaction->customer_phone }}"]').prop('disabled', false);
                $('input[value="{{ $transaction->customer_name }}"]').prop('disabled', false);
                $('input[value="{{ $transaction->customer_email }}"]').prop('disabled', false);

                // toggle button
                $('#btnEditPhone').hide();
                $('#btnSavePhone').show();
            });

            $('#btnSavePhone').click(function() {

                // disable lagi setelah save
                $('input[value="{{ $transaction->customer_phone }}"]').prop('disabled', true);
                $('input[value="{{ $transaction->customer_name }}"]').prop('disabled', true);
                $('input[value="{{ $transaction->customer_email }}"]').prop('disabled', true);

                // toggle button
                $('#btnSavePhone').hide();
                $('#btnEditPhone').show();

                var id = $(this).data('id');
                let phone = $('input[name="customer_phone"]').val();
                let name = $('input[name="customer_name"]').val();
                let email = $('input[name="customer_email"]').val();


                    $.ajax({
                        url: "{{ url('butik/sell/phone/edit') }}",
                        method: "POST",
                        data: {
                            _token: "{{ csrf_token() }}",
                            trx_detail_id: id,
                            phone: phone,
                            name: name,
                            email: email
                        },
                        success: function(response) {
                            if (response.success) {
                                alert(response.message);
                                location
                            .reload();
                            } else {
                                alert(response.message);
                            }
                        },
                        error: function(xhr, status, error) {
                            console.error(error);
                            alert('An error occurred while updating the price.');
                        },
                    });
            });

        });
        $(document).ready(function() {
            $('.edit-price-btn').on('click', function() {
                var id = $(this).data('id');
                var price = $('#price_' + id).val();
                var reason = $('#reason_' + id).val();

                // Format the price using Intl.NumberFormat for thousands separator
                var formattedPrice = new Intl.NumberFormat('en-US', {
                    minimumFractionDigits: 0
                }).format(price);

                // Show confirmation alert with the formatted new price value
                var confirmMessage = `Are you sure you want to change the price to ${formattedPrice}`;
                if (confirm(confirmMessage)) {
                    // Disable the button to prevent multiple clicks
                    $(this).prop('disabled', true);

                    $.ajax({
                        url: "{{ url('butik/sell/price/edit') }}",
                        method: "POST",
                        data: {
                            _token: "{{ csrf_token() }}",
                            trx_detail_id: id,
                            price: price,
                            reason: reason
                        },
                        success: function(response) {
                            if (response.success) {
                                alert(response.message);
                                location
                            .reload();
                            } else {
                                alert(response.message);
                            }
                        },
                        error: function(xhr, status, error) {
                            console.error(error);
                            alert('An error occurred while updating the price.');
                        },
                        complete: function() {
                            // Re-enable the button after the AJAX call is complete
                            $('.edit-price-btn').prop('disabled', false);
                        }
                    });
                }
            });
        });
    </script>
@endsection