@extends('admin.layouts.main-layout')

@section('css-content')
<style>
    .text-success{color:#28a745;font-weight:600;}
    .text-danger{color:#dc3545;font-weight:600;}
    .text-muted{color:#6c757d;}

    .card{
        border-radius:12px;
        overflow:hidden;
    }

    .card-header{
        padding:12px 15px;
    }

    .card-title{
        margin:0;
        font-size:20px;
        font-weight:700;
    }

    .card-body{
        padding:15px;
    }

    /* Scroll table */
    .tablescroll{
        width:100%;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    table{
        width:100%;
        /*min-width:650px;*/
        font-size:13px;
    }

    th,td{
        white-space:nowrap;
        padding:8px !important;
        vertical-align:middle !important;
        
    }

    th{
        font-weight:700;
    }

    td {
        font-size:15px;
    }
    .filter-box{
        background:#f8f9fa;
        padding:15px;
        border-radius:10px;
    }

    .summary-box{
        text-align:center;
        padding:20px;
        background:#f8f9fa;
        border-radius:12px;
        box-shadow:0 2px 8px rgba(0,0,0,.08);
        margin:15px;
    }

    .summary-title{
        font-size:24px;
        font-weight:700;
        margin-bottom:8px;
    }

    .summary-text{
        font-size:18px;
        font-weight:600;
        margin-bottom:8px;
    }

    .summary-result{
        font-size:20px;
        font-weight:700;
    }

    .btn{
        min-width:100px;
    }

    /* MOBILE */
    @media  (min-width:0px) and  (max-width:768px){

        .card-header{
            padding:10px;
        }

        .card-title{
            font-size:17px;
            text-align:center;
        }

        .card-body{
            padding:10px;
        }

        .filter-box{
            padding:10px;
        }

        .row > div{
            margin-bottom:10px;
        }

        .d-flex{
            flex-direction:column;
        }

        .d-flex .btn{
            width:100%;
            margin-right:0 !important;
            margin-bottom:8px;
        }

        table{
            /*min-width:520px;*/
            font-size:11px;
        }

        th,td{
            padding:6px !important;
        }

        .summary-box{
            padding:15px 10px;
            margin:10px;
        }

        .summary-title{
            font-size:18px;
        }

        .summary-text{
            font-size:14px;
            line-height:22px;
        }

        .summary-result{
            font-size:16px;
        }
        
        
        .select2-dropdown{
            max-width:300px !important;
            width:100%;
        }
        .select2-container{
            width:100% !important;
        }
    }


</style>
@endsection

@section('content')
<div class="card">
  <div class="card-header">
    <h3 class="card-title">Market Win/Bid</h3>
  </div>

  <div class="card-body">
      
      <form method="GET" action="">
      <div class="filter-box">
        <div class="row">

          {{-- Store Dropdown --}}
          <div class="col-md-3 mb-2">
            <label>Store</label>
            <br>
            <select name="stores_id" class="form-control select2">
              <option value="">Select Store</option>
              @foreach($stores as $store)
                <option value="{{ $store->id }}"
                  {{ request('stores_id') == $store->id ? 'selected' : '' }}>
                  {{ $store->name }}
                </option>
              @endforeach
            </select>
          </div>

          {{-- Type Dropdown --}}
          <div class="col-md-3 mb-2">
            <label>Type</label>
            <select name="type" class="form-control">
              <option value="">Both</option>
              <option value="open" {{ request('type')=='open' ? 'selected' : '' }}>Open</option>
              <option value="close" {{ request('type')=='close' ? 'selected' : '' }}>Close</option>
            </select>
          </div>

          {{-- Date --}}
          <div class="col-md-3 mb-2">
            <label>Date</label>
            <input type="date" name="date" value="{{ request('date') }}" class="form-control">
          </div>

          {{-- Buttons --}}
          <div class="col-md-3 mb-2">
            <label>&nbsp;</label>
            <div class="d-flex">

              <button type="submit" class="btn btn-primary mr-2">
                Search
              </button>

              <a href="{{ url()->current() }}" class="btn btn-danger">
                Reset
              </a>

            </div>
          </div>

        </div>
      </div>
    </form>

    <hr/>



    <div class="tablescroll">
      <table class="table table-bordered table-striped">
        <thead>
          <tr>
            <th>Market</th>
            <th>Bid Amount</th>
            <th>Win Amount</th>
            <th>Profit / Loss</th>
          </tr>
        </thead>

        <tbody>
          @forelse($lists as $list)

          @php
            $profit = ($list->win_amount ?? 0) - ($list->bid_amount ?? 0);
          @endphp

          <tr style="background-color: {{ $profit > 0 ? 'red' : 'green' }}; color:#fff;">
            <td>{{ $list->name }}</td>
            <td>{{ $list->bid_amount ?? 0 }}</td>
            <td>{{ $list->win_amount ?? 0 }}</td>

            <td>
              <b>{{ $profit }}</b>
            </td>
          </tr>

          @empty
          <tr>
            <td colspan="4">Record not found</td>
          </tr>
          @endforelse
          <tr>
            <td colspan="9"></td>
          </tr>
        </tbody>
        <tfoot style="background:#f8f9fa; font-weight:700;font-size:14px">
            <tr style="background-color: {{ $total_profit_amount > 0 ? 'red' : 'green' }}; color:#fff;">
                <th>Total</th>
                <th>{{ $total_bid_amount }}</th>
                <th>{{ $total_win_amount }}</th>
                <th >
                    
                        <span>
                            {{ abs($total_profit_amount) }}
                        </span>
                   
                </th>
            </tr>
        </tfoot>
      </table>
    </div>
  </div>
  
  
  @if(isset($store_detail) && isset($result))
  <div class="card-body" style="text-align:center; padding:25px; background:#f8f9fa; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,0.08);">

        <hr>
        <p style="font-size:24px; font-weight:700; margin-bottom:10px;">
            {{$store_detail->name}}
        </p>
    
        <p style="font-size:18px; font-weight:600; margin-bottom:10px;">
            Play: {{ $lists[0]->bid_amount ?? 0 }} &nbsp; | &nbsp;
            Win: {{ $lists[0]->win_amount ?? 0 }}
        </p>
    
        <p style="font-size:20px; font-weight:700;  margin-bottom:0;">
            Result : {{ $result }}
        </p>
        
        <hr>
        
    <!--    <div class="tablescroll">-->
    <!--  <table class="table table-bordered table-striped">-->
    <!--    <thead>-->
    <!--      <tr>-->
    <!--        <th>Type</th>-->
    <!--        <th>Total Play</th>-->
    <!--        <th>Total Win</th>-->
    <!--        <th></th>-->
    <!--      </tr>-->
    <!--    </thead>-->

    <!--    <tbody>-->
    <!--      @forelse($game_lists as $list)-->


    <!--      <tr>-->
    <!--        <td>{{ $list['name'] }}</td>-->
    <!--        <td>{{ $list['bid_amount'] ?? 0 }}</td>-->
    <!--        <td>{{ $list['win_amount'] ?? 0 }}</td>-->

    <!--        <td>-->
    <!--            <a href="{{url('/admin/user-winner?search_date='.request('date').'&store_id='.$store_detail->id.'&game_id='.$list['id'].'&type='.request('type'))}}"><i class="fa fa-eye"></i></a>-->
    <!--        </td>-->
    <!--      </tr>-->

    <!--      @empty-->
    <!--      <tr>-->
    <!--        <td colspan="4">Record not found</td>-->
    <!--      </tr>-->
    <!--      @endforelse-->
    <!--    </tbody>-->
        
    <!--  </table>-->
    <!--</div>-->
    
    </div>
    @endif
    
    
      
</div>
@endsection

@section('js-content')
@endsection